<template>


    <div class="contract-selector-input-div">
        <div @click="show()">{{ record.options.placeholder }} </div>
    </div>
    <a-modal v-model:visible="visible" :closable="false" :width="800" :wrap-style="{ overflow: 'hidden' }"
        @ok="onClose">
        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
            <a-row :gutter="24">
                <a-col :span="16">
                    <a-form-item name="name">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入检索条件" />
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="text-right">
                    <a-button type="primary" @click="refresh(true)">查询</a-button>
                </a-col>
            </a-row>
        </a-form>
        <s-table rowKey="id" tableLayout="fixed" :row-selection="{
            type: 'radio',
            selectedRowKeys: selectedRowKeys, onChange: onSelectChange
        }" :data="loadData" bordered :columns="columns" class="mb-2">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    {{ index + 1 }}
                </template>
            </template>
        </s-table>
    </a-modal>
</template>

<script setup name="contractSelection">


import api from '@/api/contract/purchase/index'
import { roles } from '@/utils/constants.js'
import { ref } from 'vue';

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User',
        // Column configuration not to be checked
        name: record.name,
    }),
}
const visible = ref(false)
const show = () => {
    
    visible.value = true
}

const searchFormState = ref({})

const loadData = (parameter) => {

    parameter.name=searchFormState.name
    return api.page({...parameter}).then((res) => {
        return res
    })
}

const selectedRowKeys = ref([])
const selectRecords = ref({})
const onSelectChange = (selectedKeys, selectedRows) => {
    selectedRowKeys.value = selectedKeys;
    selectRecords.value = selectedRows
    console.log('selectedRowKeys changed: ', selectedRowKeys);
}
const onselectRow = (columns, index) => {
    return {
        onClick: (event) => {
            console.log('onselectRow clicked', columns, index);
            // selectedRowKeys.value = [columns["id"]]
        },
    }
}
// const emits = defineEmits(['onOK'])
// const onOk = () => {
//     if (selectedRowKeys.value.length === 0) {
//         return
//     }
//     emits('onOK', selectedRowKeys)
// }


// 监听数据
const selectedData = ref([])
const resultData = ref([])
// watch(
//     () => props.value,
//     (newVal, oldVal) => {
//         if (newVal) {
//             resultData.value = cloneDeep(newVal)
//             selectedData.value = cloneDeep(newVal)
//         }
//     },
//     { deep: true, immediate: true }
// )

const props = defineProps(['record', 'config', 'value'])
const values = ref(props.value)
const onClose = () => {
    visible.value = false;
    // emits('onClose', selectedRowKeys.value, selectRecords.value)

    emit('change', value)
    emit('input', value)
};
defineExpose({
    show
});
const refresh = () => {


}
const columns = [
    {
        title: '合同编号',
        dataIndex: 'code',
        key: 'code',
        width: 100,
    },
    {
        title: '合同名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '甲方名称',
        dataIndex: 'partyA',
        key: 'partyA',
    },
    {
        title: '合同日期',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
    },
]

</script>

<style scoped>
.contract-selector-input-div {
    width: 100%;
    min-height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    z-index: 0;
    padding: 2px;
    background-color: #fff;
}
</style>